import { getToken, setToken, removeToken } from '@/utils/auth'
import { login, getUserInfo, getUserDetailById } from '@/api/user'

export default {
  namespaced: true,
  state: {
    token: getToken() || '', // token值为空，一刷新代码重置，token会被重置为''
    userInfo: {}
  },
  mutations: {
    setToken(state, tokenv) {
      // 这个settoken是mutation的方法，走的是原型链
      // 存入vue
      state.token = tokenv
      // 存入本地cookie
      setToken(tokenv)
      // 这个settoken走的是作用域链
      // 登录这个操作会拿到token，给存到本地，
      // 刷新的时候，token初始化会执行，就会拿到token
    },
    setUserInfo(state, userInfo) {
      state.userInfo = userInfo
    },
    // 清除用户信息
    removeUserInfo(state) {
      // 清除vuex
      state.token = ''
      state.userInfo = {}
      // 清除本地
      removeToken()
    }
  },
  actions: {
    async fetchLogin(store, form) {
      // ctx.commit  提交mutation
      // ctx.dispatch  提交action
      // 1.调用请求接口
      const res = await login(form)
      // 2.拿到请求安徽之，提交mutation函数进行修改
      store.commit('setToken', res)
    },
    async fetchUserInfo(store) {
      const res = await getUserInfo()

      const detailRes = await getUserDetailById(res.userId)
      store.commit('setUserInfo', { ...res, ...detailRes })
    }
  }
}

// 使用vuex管理数据的时候，从数据的定义到同步到异步，都放到vuex中
// 组件只做一件事，调用action传递参数

// 作用域链：变量在什么范围内生效   const name=’zs'
// 原型链:属性方法怎么找到，  如果当前对象找不到，久未退为原型对象继续找，没有找到，在位于哦原型对象继续找
// 这两条链几乎不会交互
